﻿
@{
    ViewBag.Title = "InvoiceHistory";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>InvoiceHistory</h2>
<script id="delete-confirmation" type="text/x-kendo-template">

    <p class="delete-message">“Are you sure you want to delete the records?”</p>

    <button class="delete-confirm k-button btn btn-default">Yes</button>

    <button class="delete-cancel  k-button btn btn-default">No</button>

</script>

<div id="InvoiceGrid"></div>


<div id="saveConfirm" class="collapse alert alert-success alert-dismissible" role="alert">
    <i class="pull-left fa fa-check-circle fa-2x"></i>
    <button type="button" class="close"><span aria-hidden="true">&times;</span></button>
    <span>
        Your changes have been sucessfully saved.
    </span>
</div>

<script type="text/javascript" src="~/Scripts/CallCenter/InvoiceGrid.js"></script>
<script>
    function showItems(invoiceId, e) {
        var gridInEditMode = false;
        $('#InvoiceGrid tr.k-state-selected').removeClass('k-state-selected');
        var row = $(e).closest("tr");
        row.addClass("k-state-selected");
        $('#InvoiceItemsGrid').show();
        $('#InvoiceItemsGrid').empty();
        var dataSource2 = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.ajax({
                        type: "POST",
                        url: "../InvoiceItems/GetInvoiceItems",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        cache: false,
                        data: JSON.stringify({ id: invoiceId }),
                        success: function (data) {

                            options.success(data);
                        },

                        error: function (request, status, error) {
                            alert(request.responseText);
                        }
                    });
                },

                create: function (options) {

                    var InvoiceItemsVM = new Object();
                    InvoiceItemsVM.id = options.data.id;

                    InvoiceItemsVM.invoiceId = invoiceId;
                    InvoiceItemsVM.unitPrice = options.data.unitPrice;
                    InvoiceItemsVM.quantity = options.data.quantity;
                    InvoiceItemsVM.itemDescription = options.data.itemDescription;
                    $.ajax({
                        type: "POST",
                        url: "/InvoiceItems/CreateInvoiceItems",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify(InvoiceItemsVM),
                        success: function (data) {
                            if (data.Message) {
                                alert(data.Message);
                            }
                            options.success(data);
                        }
                    });
                },
                update: function (options) {

                    $.ajax({
                        type: "POST",
                        url: "/InvoiceItems/UpdateInvoiceItems",
                        dataType: 'json',
                        data: JSON.stringify(options.data),
                        contentType: "application/JSON",
                        success: function (data) {
                            if (data.Message) {
                                alert(data.Message);
                            }
                            options.success(data);
                        }
                    });
                },

                destroy: function (options) {
                    $.ajax({
                        type: "POST",
                        url: "../InvoiceItems/DeleteInvoiceItems",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify({ id: options.data.id }),

                        success: function (data) {

                            options.success(data);
                        }
                    });
                },
                parameterMap: function (options) {
                    return kendo.stringify(options); // kendo.stringify serializes to JSON string
                }
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: {
                            editable: false, nullable: true,
                            type: "int"
                        },
                        invoiceId:
                            {
                                type: "int"
                            },

                        unitPrice:
                            {
                                type: "int"
                            },

                        quantity: {
                            type: "int"
                        },
                        itemDescription: {
                            type: "string"
                        },

                        error: function (a) {
                            $('#productRequestGrid').data("kendoGrid").cancelChanges();
                        },
                    }
                }
            }

        });

        function dateTimeEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({});
        }


        $("#InvoiceItemsGrid").kendoGrid({
            dataSource: dataSource2,
            scrollable: true,
            height: "300px",
            toolbar: [{ name: "create", text: "Create InvoiceItems" }, "excel"], //, "save", "cancel"],
            excel: {
                allPages: true,
                fileName: "InvoiceItemsExport.xlsx"
            },
            pageable: true,
            scrollable: true,
            height: 250,
            columns: [
                     { field: "unitPrice", title: "Unit Price", width: "9em" },
                       { field: "quantity", title: "Quantity",  width: "10em" },                  
                     
                 { field: "itemDescription", title: "Item Description", width: "10em" },

          {
              title: "&nbsp;",
              width: "10em",

              command: [

                  "edit",
                  {
                      name: "Delete",


                      click: function (e) {

                          var tr = $(e.target).closest("tr"); //get the row for deletion
                          var dataItem = this.dataItem(tr); //get the row data so it can be referred later
                          //see what is coming in dataItem
                          //if (dataItem.QuestionAnswers.length > 0) {
                          //    $("#delValidation").addClass('in')
                          //}
                          //else {

                          deleteTopicConfirmation(e, this);
                          //   }
                          return false;
                      }
                  }
              ]
          }
            ],
            filterable: {
                extra: false,
                operators: {
                    string: {
                        eq: "Is equal to",
                        neq: "Is not equal to",
                        contains: "Contains"
                    }
                }
            },
            editable: "popup",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            selectable: true,
            edit: function () {
                //   e.container.find(".k-edit-label:nth-child(3)").hide();
                gridInEditMode = true;
            },
            excelExport: function (e) {
                for (var i = 0; i < e.workbook.sheets[0].columns.length; i++) {
                    e.workbook.sheets[0].columns[i].autoWidth = true;
                }
            },
            cancel: function () {
                gridInEditMode = false;
            },
            edit: function (e) {
            }
        });
        dataSource2.bind("requestEnd", showSuccessMessage);
        $(".close").click(function () {
            $(this).parent().removeClass('in');
        });
    }
</script>



